<template>
  <div class="form-section" v-if="showFieldConfig">
    <el-row :gutter="20">
      <!-- 字段类型 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.field_type', '字段类型')"
          prop="config.field_type"
          tooltipContent="如果数据库中已存储数据，请慎重修改"
        >
          <ra-dict-select
            :style="commonInputStyle"
            :placeholder="$p('menu.dev.field.field.field_type', '字段类型')"
            type="select"
            code="sys_field_options"
            v-model="modelValue.config.field_type"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 字段长度 -->
      <el-col :xs="xs" :sm="sm" :md="md" v-if="showFieldLength">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.field_length', '字段长度')"
          prop="config.field_length"
          tooltipContent="如果数据库中已存储数据，请慎重修改"
        >
          <el-input
            :style="commonInputStyle"
            :placeholder="$p('menu.dev.field.field.field_length', '字段长度')"
            v-model="modelValue.config.field_length"
            @change="handleTableDataCheck"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 字段默认值 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.field_default', '字段默认值')"
          prop="config.field_default"
          tooltipContent="数据库表中字段的默认值，注意需要与数据类型一致"
        >
          <el-input
            :style="commonInputStyle"
            :placeholder="
              $p('menu.dev.field.field.field_default', '字段默认值')
            "
            v-model="modelValue.config.field_default"
            :disabled="fieldDefaultDisabled"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 字段约束 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.field_constraint', '字段约束')"
          prop="config.field_constraint"
          tooltipContent="如果数据库中已存储数据，请慎重修改"
        >
          <el-checkbox-group
            v-model="modelValue.config.field_constraint"
            @change="handleTableDataCheck"
            :style="commonInputStyle"
          >
            <el-checkbox label="非空" value="notnull" />
            <el-checkbox label="唯一" value="unique" />
          </el-checkbox-group>
        </el-form-item-plus>
      </el-col>

      <!-- 字段索引 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.field_index', '字段索引')"
          prop="config.field_index"
          tooltipContent="如果数据库中已存储数据，请慎重修改"
        >
          <el-radio-group
            v-model="modelValue.config.field_index"
            @change="handleTableDataCheck"
            :style="commonInputStyle"
          >
            <el-radio value="none">无</el-radio>
            <el-radio value="index">普通</el-radio>
            <el-radio value="unique">唯一</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

const xs = 24;
const sm = 12;
const md = 8;

// Props定义
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  commonInputStyle: {
    type: Object,
    default: () => ({ minWidth: '220px' }),
  },
  lengthType: {
    type: Array,
    default: () => [
      'varchar',
      'bigint',
      'int',
      'smallint',
      'tinyint',
      'decimal',
    ],
  },
});

// 事件定义
const emit = defineEmits(['update:modelValue', 'checkTableData']);

// 计算属性
const showFieldConfig = computed(
  () => props.modelValue.config.create_field === 'create',
);

const showFieldLength = computed(() => {
  return props.lengthType.indexOf(props.modelValue.config.field_type) !== -1;
});

const fieldDefaultDisabled = computed(() => {
  return ['json', 'text', 'longtext'].includes(
    props.modelValue.config.field_type,
  );
});

// 事件处理
const handleTableDataCheck = () => {
  emit('checkTableData');
};
</script>

<style lang="scss" scoped></style>
